<template>
    <div class="hello">
        <div class="left_menu">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
            <el-menu 
             default-active="1-4-1"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             class="el-menu-vertical-demo" 
             :collapse="isCollapse">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span slot="title">系统设置</span>
                    </template>
                    <el-menu-item index="1-1">基础设置</el-menu-item>
                    <el-menu-item index="1-2">用户设置</el-menu-item>
                    <el-menu-item index="1-3">验证码</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">权限 & 用户组</span>
                    </template>
                    <el-menu-item index="2-1">用户组</el-menu-item>
                    <el-menu-item index="2-2">权限</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div class="right_content">
          
        </div>
    </div>
</template>

<script>
import  RESTFUL_menu from '@/assets/api/menu.js'
export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        isCollapse:true
      }
    },
    created(){
        console.log(RESTFUL_menu)
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
  width:100%;
  height:100%;
  position:relative;
}
.left_menu{
  width:210px;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
}
.right_content{
  position: absolute;
}
/*h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}*/
</style>
